<template>
  <div class="swiper">
    <div class="imgBo">
        <img src="https://img.zcool.cn/community/019f965a61b424a80120121f906f84.jpg@1280w_1l_2o_100sh.jpg" alt="">
    </div>
    <div class="text">
        <div>猜你喜欢</div>
        <div class="list">
            <div class="list_1">
                <div @click="lengthSort(index)" v-for="(item,index) in arr1 " :key="index">{{item}}</div>
            </div>
            <div class="list_2">
                <div v-for="(item,index) in arr2" :key="index">{{item}}</div>
            </div>
            <div class="shopp" v-for="(item,index) in arr3" :key="index">
                <div class="listImage">
                    <img :src="item.picUrl" alt="">
                </div>
                <div class="listText">
                    <div><h2>{{item.name}}</h2></div>
                    <div class="month">月销{{item.num}}</div>
                    <div class="length">
                        <div>{{item.text}}</div>
                        <div>
                            <span>{{item.mintues}}分钟</span>{{item.length}}km
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
var pic ="https://tse1-mm.cn.bing.net/th/id/OIP-C.HEQrNyXhiYkbAVBy8-0n0wAAAA?w=205&h=205&c=7&r=0&o=5&dpr=1.25&pid=1.7"
export default {
    data() {
        return {
            arr1: [
                '综合排序', '距离最近', '销量最高', '筛选'
            ],
            arr2: [
                '年货节热卖', '津贴联盟', '满减优惠', '品质联盟'
            ],
            arr3: [
                { picUrl: pic, name: "金百万烤鸭(苏家坨店)", num: "1632", text: "起送￥20,远距离配送￥3", mintues: 47, length: 3.9 },
                { picUrl: pic, name: "稻香金源饺子馆", num: "230", text: "起送￥20,远距离配送￥3.5", mintues: 44, length: 2.5 }
            ]
        }
    },
    methods: {
        lengthSort(index){
        if (index == 1) {
            this.arr3.sort((a, b) => {
                return a.length - b.length;
            });
        } else if (index == 2) {
            this.arr3.sort((a, b) => {
                return b.num - a.num;
            });
        }

        }

    }
}
</script>

<style lang="scss" scoped>
.swiper{
    margin: 2px;
}
.imgBo{
    width: 60%;
    margin: 2.5% 20%;
}
.imgBo img{
    width: 100%;
}
.text{
    margin: 2px;
}
.list{
    margin-top: 10px;
}
.list_1{
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
}
.list_2{
    display: flex;
    justify-content: space-between;
}
.list_2 div{
    margin: 2px;
    background-color: whitesmoke;
    border-radius: 5px;
    padding: 2px;
}
.shopp{
    display: flex;
    margin: 4px;
}
.listImage{
    margin-right: 8px;
}
.listImage img{
    width: 100px;
}
.listText h2{
    margin-bottom: 5px;
}
.listText .length{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 4px;
}
</style>